﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/bootstrap.min.js"> </script>
    <script type="text/javascript" src="js/jquery-1.6.2.js"> </script>
    <script type="text/javascript" src="js/knockout-1.2.1.js"> </script>
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Sooper Group</a>
                <ul class="nav">
                    <li class="active"><a href="#">Customer Managment</a></li>
                </ul>
            </div>
        </div>
    </div>
    <form class="offset3 form-horizontal">
    <fieldset>
        <legend>Login</legend>
        <div class="control-group">
            <label class="control-label" for="input01">User</label>
            <div class="controls">
                <input data-bind="value : user" type="text" class="input-xlarge" id="input01" />
            </div>
        </div>        
        <div class="control-group">
            <label class="control-label" for="input01">Password</label>
            <div class="controls">
                <input data-bind="value : password" type="text" class="input-xlarge" id="Text3" />&nbsp;&nbsp;&nbsp;
                <button data-bind="click : logon" class="btn btn-primary" style="vertical-align: top">
                    Submit</button>
            </div>
        </div>
        <div data-bind="visible : isAuthenticated() == false" class="control-group">
            <a class="close" data-dismiss="alert">×</a>
            <div class="alert alert-error">Login Failed</div>
        </div>
    </fieldset>
    </form>
    <script type="text/javascript">
        var viewModel = {
            user: ko.observable("User"),
            password: ko.observable("Password"),
            isAuthenticated: ko.observable(null),

            logon: function() {
                var request = {
                    UserName: this.user(),
                    Password: this.password(),
                    
                };

                var self = this;

                var ajaxOptions = {
                    url: "/ProfilingApp/SecurityHandler?Op=Login",
                    type: "POST",
                    dataType: "JSON",
                    data: JSON.stringify(request),
                    complete: function(xmlHttpRequest, status) {
                        try {
                            var response = JSON.parse(xmlHttpRequest.responseText);

                            if (response.IsAuthenticated) {
                                window.location = "/CreateCustomer.html";
                            } else {
                                self.isAuthenticated(false);
                            }

                        } catch(e) {
                            alert(e.message);
                        }
                    },
                    contentType: "application/json; charset=\"utf-8\"",
                    
                };

                $.ajax(ajaxOptions);
            }
        };

        ko.applyBindings(viewModel);
    </script>

</body>
</html>
